<template>
	<view class="footer-button">
		<up-row justify="space-between" :gutter="gutter">
			<up-col v-for="item in button" :key="item.label" :span="item.span || 12">
				<up-button 
					:type="item.type" 
					:text="item.label" 
					:disabled="item.disabled" 
					:loading="item.loading" 
					@click="changeButton(item)">
				</up-button>
			</up-col>
		</up-row>
	</view>
	<view class="footer-button-block"></view>
</template>

<script setup>
const props = defineProps({
	button: {
		type: Array,
		default: () => ([])
	},
	gutter: {
		type: Number,
		default: 10
	}
})

const changeButton = (item) => {
	const isFunction = Object.prototype.toString.call(item.beforeChange) === '[object Function]'
	if(isFunction) {
		item.loading = true
		item.beforeChange().then(() => {
			item.loading = false
		}).catch(() => {
			item.loading = false
		})
		return
	}
	item.callback && item.callback(item)
}
</script>

<style lang="scss" scoped>
.footer-button {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #fff;
	padding: 12rpx;
}
.footer-button-block {
	height: 150rpx;
}
</style>